<template>
  <div class="pub-top-nav-wrapper">
    <div class="pub-top-nav">
      <img src="@/assets/image/logo.png" alt="ToKnow" class="logo"
      @click="$open('/')">

      <div class="category-choose">
        <p>创作类型: </p>
        <item-list class="category-choice-list" 
        :items="choices" :idx="choiceIdx"
        @changeIdx="changeChoice"></item-list>
      </div>

      <user-card class="user-card"></user-card>

      <div class="draft-box-wrapper">
        <button class="draft-box" @click="gotoDraft">草稿箱</button>
      </div>
    </div>
  </div>
</template>

<script>
import ItemList from '@c/utils/ItemList.vue';
import UserCard from '@c/TopNavCom/UserCard.vue';

  export default {
    components: {
      ItemList,
      UserCard
    },
    data() {
      return {
        choices: [
          '文章',
          '资源'
        ],
      }
    },
    computed: {
      choiceIdx() {
        return this.$route.name === 'publishSource' ? 1 : 0;
      }
    },
    methods: {
      changeChoice(idx) {
        if(this.choiceIdx === idx) return;
        if(idx === 1) this.$router.push('/publish/source');
        else this.$router.push('/publish/article');
      },
      gotoDraft() {
        if(this.$route.path.includes("source")) this.$open('/creator/manage/source/draft');
        else this.$open('/creator/manage/article/draft');
      }
    },
  }
</script>

<style lang="less" scoped>
@h: var(--topNavHeight);

.pub-top-nav-wrapper {
  width: 100vw;
  height: var(--topNavHeight);
  background-color: white;

  .pub-top-nav {
    width: var(--outerWidth);
    height: 100%;
    margin: 0 auto;

    img,
    .category-choose {
      float: left;
      height: 100%;
    }

    .logo:hover {
      cursor: pointer;
    }

    .category-choose {
      --w: 250px;
      --fs: calc(var(--topNavHeight) * 0.3);
      --w1: calc(var(--w) * 0.35);
      --w2: calc(var(--w) - var(--w1));
      margin-left: var(--topNavHeight);
      width: var(--w);
      height: var(--topNavHeight);

      p,
      .category-choice-list {
        float: left;
      }

      p {
        width: var(--w1);
        line-height: var(--topNavHeight);
        font-size: var(--fs);
        color: var(--dark);
        font-weight: bold;
      }

      .category-choice-list {
        --itemListWidth: var(--w2);
        --itemListHeight: var(--topNavHeight);
        --itemNum: 2;
      }
    }

    .user-card {
      float: right;
      margin-right: 50px;
      --userCardWidth: 150px;
      --userCardHeight: var(--topNavHeight);
      --userCardInnerHeight: calc(var(--topNavHeight) * 7 / 12);
    }

    .draft-box-wrapper {
      float: right;
      height: 100%;
      margin-right: 30px;
      display: flex;
      justify-content: center;
      align-items: center;

      .draft-box {
        height: calc(@h * 0.6);
        line-height: calc(@h * 0.6);
        padding: 0 calc(@h * 0.2);
        border: 1px solid rgb(177, 198, 255);
        border-radius: calc(@h * 0.1);
        color: rgb(0, 132, 255);
        transition: .3s;

        &:hover {
          border-color: var(--lightBlue);
          color: var(--darkBlue);
        }
      }
    }
  }
}
</style>